@import './base.css';
@import './animation.css';
html {
  font-size: 13.33333vw
}

html.ipad,html[device=pc] {
  font-size: 73.33333PX
}

html.ipad .layout,html[device=pc] .layout {
  width: 550PX
}
.button-wrap .btn {
  width: 3.16rem;
  height: .72rem;
  background: #dd292c;
  box-shadow: 0 .1rem .2rem 0 rgba(236, 84, 0, .2);
  font-size: .24rem;
  color: #fff;
  text-shadow: 0 0 .3rem rgba(185, 52, 0, .55);
  display: flex;
  font-weight: 700;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
html .swiper-pagination {
  margin-top: .6rem;
  height: .07rem;
  display: flex;
  justify-content: center;
  left: 50% !important;
  transform: translateX(-50%)
}

html .swiper-pagination .swiper-pagination-bullet {
  margin-right: .13rem;
  width: .07rem;
  height: .07rem;
  background: #cecece;
  border-radius: 50%;
  opacity: 1;
  transition: all .3s
}

html .swiper-pagination .swiper-pagination-bullet:last-of-type {
  margin-right: 0;
  margin-left: 0
}

html .swiper-pagination .swiper-pagination-bullet-active {
  width: .23rem;
  height: .07rem;
  background: #dd292c;
  border-radius: .04rem
}
.cases {
  margin-bottom: 1rem;
  opacity: 0;
  animation: fade-in 1s;
  animation-fill-mode: forwards
}

.cases ul li {
  display: flex;
  flex-direction: column;
  cursor: pointer
}

.cases ul li .imgBox {
  width: 6.9rem;
  height: 4.94rem;
  box-shadow: 0 .13rem .3rem 0 hsla(0,0%,63.1%,.35);
  border-radius: .2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative
}

.cases ul li .imgBox img {
  width: 100%;
  height: 100%
}

.cases ul li .imgBox img:nth-of-type(2) {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.2rem;
  height: 1.2rem;
  transform: translate(-50%,-50%)
}

.cases ul li .content {
  padding: 0 .3rem
}

.cases ul li .content .top {
  display: flex;
  justify-content: space-between
}

.cases ul li .content .top .topLeft>p {
  font-size: .36rem;
  color: #000;
  font-weight: 700;
  margin-top: .55rem
}

.cases ul li .content .concate {
  display: flex;
  margin-top: .15rem
}

.cases ul li .content .concate p {
  font-size: .24rem;
  color: #000;
  font-weight: 700;
  display: flex;
  align-items: center
}

.cases ul li .content .concate p i {
  background-size: 100% 100%!important;
  width: .23rem;
  height: .23rem;
  display: inline-block;
  margin-right: .14rem
}

.cases ul li .content .concate p.item1 {
  margin-right: .54rem
}

.cases ul li .content .concate p.item1 i {
  background: url(/src/assets/img/pingfang.png) no-repeat
}

.cases ul li .content .concate p.item2 {
  margin-right: .54rem
}

.cases ul li .content .concate p.item2 i {
  background: url(/src/assets/img/taoshu.png) no-repeat
}

.cases ul li .content .concate p.item3 i {
  background: url(/src/assets/img/address.png) no-repeat
}

.cases ul li .content .top .topRight {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: .45rem;
  position: relative
}

.cases ul li .content .top .topRight div {
  position: relative;
  transition: transform .3s;
  width: .54rem;
  height: .54rem;
  background: #f5f5f5;
  border-radius: 50%
}

.cases ul li .content .top .topRight div img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  transition: all .3s
}

.cases ul li .content .top .topRight div img.img {
  clip-path: ellipse(0 0 at 0 100%);
  z-index: 3
}

.cases ul li .content .top .topRight div img.img2 {
  clip-path: ellipse(140% 141% at 0 100%)
}

.cases ul li .content .top .topRight p {
  font-size: .22rem;
  color: #a0a0a0;
  width: 1.25rem;
  text-align: center
}

.cases ul li .content .top .topRight p span {
  font-family: Gilroy;
}

.cases ul li .content .top .topRight .pActive {
  color: #333;
  width: 1.36rem
}

.cases ul li .content .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .46rem
}

.cases ul li .content .bottom .bottomLeft {
  display: flex;
  align-items: center
}

.cases ul li .content .bottom .bottomLeft .imgBox2 {
  width: .89rem;
  height: .89rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  overflow: hidden
}

.cases ul li .content .bottom .bottomLeft .text {
  margin-left: .36rem
}

.cases ul li .content .bottom .bottomLeft .text p:first-of-type {
  font-size: .28rem;
  color: #000;
  font-weight: 700
}

.cases ul li .content .bottom .bottomLeft .text p:nth-of-type(2) {
  font-size: .22rem;
  color: #999
}

.cases ul li .content .bottom .button-wrap {
  width: 2.16rem;
  height: .72rem
}

.cases ul li .content .bottom .button-wrap .btn {
  margin: 0;
  width: 2.16rem;
  height: .72rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .24rem
}
html .el-pagination{
  display: flex;
  align-items: center;
}
.pagination-box .el-pagination {
  width: 100%;
  justify-content: space-between;
  padding: 0 .05rem;
  height: auto;
}
.pagination-box .el-pager li.is-active{
  color: #DD292C;
}
.pagination-box .el-pagination button {
  width: .64rem;
  height: .64rem;
  border-radius: 0;
  background: #DD292C;
  color: #fff;
}
.el-pagination button.is-disabled, .el-pagination button:disabled{
  background-color:#DD292C !important;
  color:#fff !important;
}
